<template>
  <div style="height: 100%;">
    <div class="sign-view" v-if="!showCode">
      <div class="sign-format">
        <div class="email">
          <el-input :placeholder="$t('form.emailPlaceholder')" v-model="form.email" @blur="emailRule">
            <template slot="prepend" >{{ $t('form.email') }}</template>
          </el-input>
        </div>
        <div class="email input-margin">
          <el-input :placeholder="$t('form.pwdPlaceholder')" v-model="form.pwd" :type="passwordVisible1? 'text': 'password'" @blur="pwdRule">
            <template slot="prepend" >
              <div>{{ $t('form.pwd') }}</div>
              <svg-icon class="icon-eye" :iconClass="passwordVisible1?'eye':'eye-close'"  @click.native="handlePasswordVisible1" />
            </template>
          </el-input>
        </div>
        <div class="email input-margin">
        <el-input :placeholder=" $t('form.pwd2Placeholder') " v-model="form.pwd2" :type="passwordVisible2? 'text': 'password'" @blur="pwd2Rule">
          <template slot="prepend" >
            <div>{{ $t('form.pwd2') }}</div>
            <svg-icon :iconClass="passwordVisible2?'eye':'eye-close'" class="icon-eye" @click.native="handlePasswordVisible2" />
          </template>
        </el-input>
      </div>
      </div>
      <div class="sign-help">
        <div class="account">
          {{ $t('login.agree') }}
          <span class="register" @click="openUrl"> {{ $t('login.privacy') }}</span>
        </div>
        <div class="account">
          {{ $t('login.haveAccount') }}
          <span class="register" @click="backLogin">{{ $t('login.log') }}</span>
        </div>
      </div>
      <el-button type="primary" class="sign-in" @click="getCode('sign')" :loading="loading">{{ $t('login.register') }}</el-button>
      <div class="split-line">
        <span class="line"></span>
        <span class="select">{{ $t('login.or') }}</span>
        <span class="line"></span>
      </div>
      <div class="sign-footer">
        <div class="log-goodglr browser" @click="thirdLogin()">
          <svg-icon iconClass="google" class="icon"/>
        </div>
        <!-- <div class="log-goodglr browser" @click="thirdLogin('facebook')">
          <svg-icon iconClass="fb" class="icon"/>
        </div>
        <div class="browser" @click="thirdLogin('facebook')">
          <svg-icon iconClass="tiwitter" class="icon"/>
        </div> -->
      </div>
    </div>
    <Code v-if="showCode" :email="form.email" :password="form.pwd" :type="type" ref="code"  @getType="getType" @codeToLogin="backLogin" @getCode="getCode"/>
  </div>
</template>
<script>
import { sendSms } from '@/api/login'
import { mapGetters } from 'vuex'
import mixins from './mixins'
import Code from './com/code-input/code'
import i18n from '@/lang'
export default {
  name: 'Sign',
  mixins: [mixins],
  components: { Code },
  data () {
    return {
      passwordVisible1: false,
      passwordVisible2: false,
      loading: false,
      showCode: false,
      type: 'sign',
      emailRight: false,
      pwdRight: false,
      pwd2Right: false,
      form: {
        email: '',
        pwd: '',
        pwd2: '',
        code: ''
      }

    }
  },
  computed: {
    ...mapGetters(['appInfo', 'appCfg']),
    rules () {
      return this.emailRight && this.pwdRight && this.pwd2Right
    },
    protocol () {
      if (i18n.locale === 'en') {
        return 'english'
      } else if (i18n.locale === 'zh') {
        return 'jtzw'
      } else {
        return 'ftzw'
      }
    }
  },
  methods: {
    openUrl () {
      this.$xz('xz_open_url', `${this.appCfg.site}/user_privacy-${this.protocol}.html`)
    },
    // codeToLogin () {
    //   this.$emit('codeToLogin')
    // },
    getType () {
      this.showCode = false
    },
    thirdLogin (t) {
      this.$xzAsy('xz_GetGoogleCode')
    },
    emailRule () {
      this.emailRight = this.emailRules(this.form.email)
    },
    pwdRule () {
      this.pwdRight = this.pwdRules(this.form.pwd, this.form.pwd2, true)
    },
    pwd2Rule () {
      this.pwd2Right = this.pwd2Rules(this.form.pwd, this.form.pwd2)
    },
    backLogin () {
      this.$PsMessage.closeAll()
      this.$emit('showLogin')
    },
    handlePasswordVisible1 () {
      this.passwordVisible1 = !this.passwordVisible1
    },
    handlePasswordVisible2 () {
      this.passwordVisible2 = !this.passwordVisible2
    },
    getCode () {
      if (this.rules) {
        this.loading = true
        const params = {
          'eMail': this.form.email,
          'type': 'mail',
          'usedTo': 'register',
          'project': process.env.VUE_APP_PROJECTID
        }
        sendSms(params, { offset: 169 }).then((res = {}) => {
          const data = res.data || {}
          this.loading = false
          this.$PsMessage({ message: data.MSG })
          if (data.Existed || data.IsOverCount || !data.Verify) {
            return
          }
          this.showCode = true
          this.$nextTick(function () {
            this.$refs.code.timeChange(data.Expire || 600)
          })
          this.form.codeID = data.ID
        }).catch(() => {
          this.loading = false
        })
      } else if (!this.emailRight) {
        this.emailRule()
      } else if (!this.pwdRight) {
        this.pwdRule()
      } else if (!this.pwd2Right) {
        this.pwd2Rule()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.sign-view{
  padding: 83px 62px 39px;
  width: 100%;
  height: 100%;
  .sign-format{
    .input-margin{
        margin-top: 10px;
      }
      .email{
      width: 100%;
      height: 56px;
      background: rgba(0,187,215,0.05);
      border-radius: 6px;
      border: 1px solid var(--color-primary-2);
        &:hover{
          border-color: var(--color-primary-1);
        }
        .el-input-group--prepend{
          display: flex;
          flex-wrap: wrap;
          /deep/ .el-input-group__prepend{
            display: flex;
            justify-content: space-between;
            padding: 6px 10px 0;
            width: 100%;
            background-color:transparent;
            font-size: 12px;
            font-weight: 400;
            color: #FFF;
            border: none;
              .icon-eye{
                width: 16px;
                height: 16px;
                &:hover{
                  color: var(--color-primary-1);
                  cursor: pointer;
                }
              }
          }
          /deep/ .el-input__inner{
            padding: 0 10px;
            height: 38px;
            background:transparent;
            font-size: 12px;
            font-weight: bold;
            color: #FFF;
            border: none;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            &::placeholder{
            color:rgba(255, 255, 255, .3);
            font-weight: 400;
          }
          }
        }
      }
  }
  .sign-help{
    margin: 15px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .account{
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, .7);
      .register{
        color: #FFF;
        border-bottom: 1px solid #FFF;
        &:hover{
            color: var(--color-primary-1);
            cursor: pointer;
            border-bottom-color: var(--color-primary-1);
        }
      }
    }
    .forgot{
      width: 132px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, .7);
      border-bottom: 1px solid rgba(255, 255, 255, .7);
    }
  }
  .sign-in{
    margin-left:50%;
    transform: translateX(-50%);
    width: 240px;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    border-radius: 5px;
    border:none;
    background-color: var(--color-primary);
    &:hover{
      background-color: var(--color-primary-0);
    }
  }
  .split-line{
    display: flex;
    align-items: center;
    margin: 29px 0 14px 0;
    width: 100%;
    height: 16px;
    .line{
      display: inline-block;
      width: 200px;
      height: 1px;
      background: rgba(255, 255, 255, .1);
    }
    .select{
      display: inline-block;
      text-align: center;
      width: 60px;
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
    }
  }
  .sign-footer{
    display: flex;
    justify-content: center;
    // .log-goodglr{
    //   margin-right: 16px;
    // }
    .browser{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 5px;
      cursor: pointer;
      &:hover{
        border: 1px solid var(--color-primary-1);
      }
      .icon{
        margin: 10px;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
